<script>
export default {
  name: "WorkOrderXQView",
  data() {
    return {
      list: {},
      active: 0,
      logList1: [],
      logList:[],
      statusList: [],
      statusList1: [],
      // statusList: [
      //   {
      //     name: '1#-1F-A',
      //     completed: '未完成',
      //     status: 1,
      //   },
      //   {
      //     name: '1#-1F-B',
      //     completed: '已完成',
      //     status: 1
      //   },
      //   {
      //     name: '1#-1F-C',
      //     completed: '已完成',
      //     status: 2
      //   },
      //   {
      //     name: '1#-2F-A',
      //     completed: '已完成',
      //     status: 1
      //   }
      // ],
      // statusList1: [
      //   {
      //     location: '浙大森林A栋1号楼1层消防通道1位',
      //     completion: '未完成',
      //     status: 1
      //   },
      //   {
      //     location: '浙大森林A栋1号楼1层消防通道1位',
      //     completion: '已完成',
      //     status: 1
      //   },
      //   {
      //     location: '浙大森林A栋1号楼1层消防通道1位',
      //     completion: '已完成',
      //     status: 2
      //   },
      //   {
      //     location: '浙大森林A栋1号楼1层环境传感器',
      //     temperature: '28°C',
      //     status: 1
      //   }
      // ],
      show: false,
      columns: [],
      //备注
      remark: '',
      show1: false,
      pingfen:0,
      pinglun:'',
      add:{},
      guanbi:false,
    };
  },
  created() {
    // 获取参数
    this.id = this.$route.query.id
    // 查询
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/findById?id=` + this.id).then(res => {
      this.list = res.data.data;
      this.add = res.data.data;
      if (this.list.status == 3){
        this.$router.go(-1);
      }
      // console.log(res)
      console.log(this.list)
      console.log(this.add)
    })
    this.userList()
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/smqzAll`).then(res => {
      this.logList = res.data.data;
      console.log(this.logList)
    })
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/gdrzAll`).then(res => {
      this.logList1 = res.data.data;
      console.log(this.logList1)
    })
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/wbdwAll`).then(res => {
      this.statusList = res.data.data;
      console.log(this.statusList)
    })
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/xjdwAll`).then(res => {
      this.statusList1 = res.data.data;
      console.log(this.statusList1)
    })
  },
  methods: {
    userList() {
      //查询用户名单
      this.axios.get(`http://localhost:9999/api-user-service/user/findAll`).then(res => {
        this.columns = res.data;
        console.log(this.columns)
        // console.log(res)
        // console.log(this.columns.map(item => ({ text: item.username, value: item.userId })))
        // console.log(this.columns.userName)
        // console.log(this.columns.userId)
      })
    },
    onBack() {
      this.$router.go(-1);
    },
    handleTicket(id) {
        this.$router.push({path: '/workorderwbx', query: {id: id}})
    },
    history() {
      this.$router.push({path: '/workorderhistory'})
    },
    //打开派单弹窗
    showPopup() {
      this.show = true;
    },
    //选择派单人
    onChange(picker,columns, index,) {
      this.add.processor = columns.value;
      this.add.pid = columns.user;
      // console.log(`当前值：${columns.value}, 当前索引：${index}`);
      // console.log(this.add)
      const selectedColumn = this.columns[index];
      // this.add.processor = selectedColumn.value;
      this.add.pid = selectedColumn.userId;
      console.log(`当前值：${selectedColumn.value}, 当前索引：${index}`);
      console.log(this.add);
    },
    //备注
    remarks() {
      this.add.remarks = this.remark
      console.log(this.remark)
      console.log(this.add)
    },
    //打开评论弹窗
    show1Popup() {
      this.show1 = true;
    },
    //评论
    pingLun(){
      this.add.pinglun = this.pinglun
      console.log(this.pinglun)
      console.log(this.add)
    },
    //评分
    pingFen(){
      this.add.pingfen = this.pingfen
      console.log(this.pingfen)
      console.log(this.add)
    },
    //派单
    add1() {
      console.log(this.add)
      this.add.status = 1;
      // this.add.pid =

      this.axios.post(`http://localhost:9999/api-work-order-service/work-order/save`,this.add).then(res => {
        if (res.data.code == 1){
          this.$toast.success("派单成功");
          this.$router.go(-1)
        }else{
          this.$toast.fail("派单失败");
        }
      })
      this.show = false;
    },
    //关闭(后补状态变更)
    guanbi11(){
      this.guanbi = false;
      this.list.status = 3;
      this.axios.post(`http://localhost:9999/api-work-order-service/work-order/save`,this.list).then(res => {
        if (res.data.code == 1) {
          this.$toast.success("已关闭");
        } else {
          this.$toast.fail("失败");
        }
      })
      this.$router.push({path: '/workorder'})
    },
    //打开关闭弹窗
    guanbi1(){
      // this.$router.push({path: '/workorder'})
      this.guanbi = true;
    }
  },

}
</script>

<template>
  <div>
    <van-nav-bar
        title="详情"
        left-arrow
        @click-left="onBack"
        fixed
    />

    <div>
      <h4>占位</h4>
      <h4 class="title">基本信息</h4>
      <div class="info">
        <p>维保编号：{{list.workOrderNumber}}</p>
        <p>维保类型：{{list.workOrderType==1?"维修":list.workOrderType==2?"维保":"巡检"}}</p>
        <p>处理人：{{list.processor}}</p>
        <p>检查时间：{{list.workOrderChecktime}}</p>
        <p>创建时间：{{list.workOrderCreatetime}}</p>
        <p>{{list.status==1?"普通":list.status==2?"紧急":"特急"}}</p>
        <p v-if="list.workOrderType==1&&list.score!=null" >评分：{{list.score}}</p>
        <p v-if="list.workOrderType==1&&list.evaluation!=null" >评价：{{list.evaluation}}</p>
        <h4 v-if="list.workOrderType==1"><a @click="history()">历史报价</a></h4>
        <van-button v-if="list.workOrderType==1&&list.processor==null" type="info" size="small" @click="showPopup()" >派单</van-button>
        <van-button v-if="list.workOrderType==1" type="danger" size="small" @click="guanbi1">关闭</van-button>
      </div>
      <div><van-popup v-model="show" class="operation-log">
        <h4>派单</h4>
        <div>
          <van-picker
              title="选择派单人"
              show-toolbar
              confirm-button-text=" "
              cancel-button-text=" "
              :columns="columns.map(item => ({ text: item.username, value: item.username, id: item.userId }))"
              @change="onChange"
          />
        </div>
        <div>
          <van-field placeholder="请输入备注" v-model="remark" @change="remarks">
            <template slot="label" >
              备注
            </template>
          </van-field>
        </div>
        <van-button @click="show = false">取消</van-button>
        <van-button @click="add1">确定</van-button>
        <van-button type="primary" size="large" @click="show1Popup">评论</van-button>


        <van-popup v-model="show1" class="operation-log">
          <h4>评论</h4>
          <div>
            <h5>您对该工单的处理满意吗？</h5>
            <van-rate v-model="pingfen" allow-half void-icon="star" void-color="#eee"  color="#ffd21e" @change="pingFen" />
            <van-field placeholder="请输入评论内容" v-model="pinglun" @change="pingLun">
              <template slot="label" >
                评论内容
              </template>
            </van-field>
          </div>
        </van-popup>
      </van-popup>
        <van-popup v-model="guanbi" class="operation-log">
          是否关闭工单？
          关闭后不可再次修改！
          <van-button type="danger" size="large" @click="guanbi=false">返回</van-button>
          <van-button type="danger" size="large" @click="guanbi11">确定</van-button>
        </van-popup>
        </div>
      </div>

      <div v-if="list.workOrderType==1" class="info">
        <p>设备ID: {{list.shebeiId}}</p>
        <p>设备名称: {{list.shebeiName}}</p>
        <p>设备位置: {{list.shebeiAddress}}</p>
      </div>
      <div v-if="list.workOrderType==1">
        <van-tabs v-model="active">
          <van-tab title="生命周期">
            <van-steps direction="vertical" :active="0">
            <van-step v-for="item in logList" :key="logList.id">
              <p>{{ item.time }}</p>
              <p>{{ item.type }}</p>
              <p v-if="item.reportNumber">告警编号: {{ item.reportNumber }}</p>
              <p v-if="item.workOrderNumber">工单编号: {{ item.workOrderNumber }}</p>
            </van-step>
          </van-steps>
          </van-tab>

          <van-tab title="工单日志">
            <van-steps direction="vertical" :active="0">
              <van-step v-for="item in logList1" :key="logList1.id">
                <span class="log-time">{{ item.time }}</span><p></p>
                <span class="log-content">{{ item.content }}</span>
                <span class="log-operator">操作人: {{ item.operator }}</span><p></p>
                <span class="log-note" v-if="item.note">{{ item.note }}</span>
              </van-step>

            </van-steps>

          </van-tab>

        </van-tabs>

      </div>

      <p class="info">{{list.workOrderType==2?"维保点位":list.workOrderType==3?"巡检点位":""}}</p>
      <div class="status-container" v-if="list.workOrderType==2">
        <div class="status-item" v-for="(item, index) in statusList" :key="index">
          <van-icon name="location-o" />
          <span>{{ item.name }}</span>
          <span>{{ item.completed }}</span>
          <span :class="item.status === 'normal'? 'status-normal' : 'status-abnormal'">

          <div class="ticket-actions">
            <van-button v-if="item.status ==2" square type="primary" size="small" @click="handleTicket(list.workOrderId)">{{ item.status ==1? '正常' : '异常' }}</van-button>
            <van-button v-if="item.status ==1||item.status ==3" square type="primary" size="small" >{{ item.status ==1? '正常' : item.status ==3? '正常' : '异常' }}</van-button>
          </div>

      </span>

        </div>

      </div>
      <div class="device-status" v-if="list.workOrderType==3">
        <div class="status-item" v-for="(item, index) in statusList1" :key="index">
          <van-icon name="location-o" />
          <span class="device-location">{{ item.location }}</span>
          <span class="completion-status">{{ item.completion }}</span>
<!--          <van-button v-if="item.status ==2" square type="primary" size="small" @click="handleTicket(list.workOrderId)">{{ item.status ==1? '正常' : '异常' }}</van-button>-->
          <span v-if="item.status === 'normal'" class="status-normal">
          <van-icon name="checkmark" color="green" />
          </span>
<!--            <van-button v-if="item.status ==2" square type="primary" size="small" @click="handleTicket(list.workOrderId)">{{ item.status ==1? '正常' : '异常' }}</van-button>-->
            <van-icon name="warning-o" color="yellow" />

            <span v-if="item.temperature" class="temperature-status">
          温度：<span class="temperature-value">{{ item.temperature }}
            </span>
          </span>

          <div class="ticket-actions">
            <van-button v-if="item.status ==2" square type="primary" size="small" @click="handleTicket(list.workOrderId)">{{ item.status ==1? '正常' : '异常' }}</van-button>
            <van-button v-if="item.status ==1||item.status ==3" square type="primary" size="small" >{{ item.status ==1? '正常' : item.status ==3? '正常' : '异常' }}</van-button>
          </div>

        </div>

      </div>

  </div>
</template>

<style scoped>
.info {
  margin-top: 10px;
  padding: 10px;
  background-color: #f8f8f8;
  font-size: 10px;
  text-align: left;
}
.operation-log {
               padding: 20px;
             }
.log-item {
         display: flex;
         align-items: center;
         margin-bottom: 10px;
       }
.log-time {
         margin-right: 10px;
       }
.log-content {
         margin-right: 10px;
       }
.log-operator {
         margin-right: 10px;
       }
.log-note {
         margin-right: 10px;
       }
.log-status {
         margin-left: auto;
       }
.equipment-log {
               padding: 20px;
             }
.log-item {
         display: flex;
         align-items: center;
         margin-bottom: 10px;
       }
.log-time {
         margin-right: 10px;
       }
.log-type {
         margin-right: 10px;
       }
.log-warning {
         margin-right: 10px;
       }
.log-maintenance {
         margin-right: 10px;
       }
.log-add {
         margin-right: 10px;
       }
.log-repair {
         margin-right: 10px;
       }
.log-report-number {
                  margin-right: 10px;
                }
.log-work-order-number {
                        margin-right: 10px;
                      }
.status-container {
            display: flex;
            flex-direction: column;
          }
.status-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
          }
.status-normal {
            color: green;
          }
.status-abnormal {
            color: yellow;
          }
.device-status {
            padding: 20px;
          }
.status-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
          }
.device-location {
            margin-right: 10px;
          }
.completion-status {
                margin-right: 10px;
              }
.status-normal {
            margin-right: 10px;
          }
.status-abnormal {
            margin-right: 10px;
          }
.temperature-status {
                 margin-right: 10px;
               }
.temperature-value {
                 margin-right: 5px;
               }
.title {
  text-align: left;
}
.operation-log {
  width: 70%;
  height: 50%;
}
</style>